<template>
	<div class="box">
		<!-- <div class="top"><span @click="goto">{{go}}</span> 二手房出售</div> -->
		<div class="massage">
			<span></span>
			<span>发布本条信息将收费10.00元</span>
		</div>
		<div class="upimg" @click="uploader">
			<div class="left">+</div>
			<div class="right">
				<p class="right1">上传照片</p>
				<p class="right2">只上传房屋照片，不能含有文字,数字，网址，名片，水印等，所有类别图片总计20张</p>
			</div>
		</div>
		<div class="null"></div>
		<div class="select3">
			<div>
				<p>小区</p>
				<div class="section">请选择小区</div>
			</div>
			<div>
				<p>房产类型</p>
				<view class="section">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="picker">
						{{array[index]}}
						</view>
					</picker>
				</view>
			</div>
			<div>
				<p>区域</p>
				<view class="section">
					<picker @change="bindPickerChange2" :value="index2" :range="array2">
						<view class="picker">
						{{array2[index2]}}
						</view>
					</picker>
				</view>
			</div>
		</div>
		<div class="null"></div>
		<div class="select3">
			<div>
				<p>户型|朝向|装修</p>
				<view class="section">
					<picker @change="bindMultiPickerChange" mode='multiSelector' :value="index" :range="multiArray">
						<view class="picker">
						{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
						</view>
					</picker>
				</view>
			</div>
			<section class="inputtwo">
				<span>所在楼层</span><input type="text" placeholder="请填写"><span>层</span> <span class="spans">共</span> <input type="text"  placeholder="请填写"><span>层</span>
			</section>
		</div>
		<div class="null"></div>
		<div class="select3">
			<div>
				<p>面积</p>
				<input type="text" placeholder="请输入">
			</div>
			<div>
				<p>售价</p>
				<input type="text" placeholder="请输入">
			</div>
		</div>
		<div class="totop">
			<p>标签</p>
			<div class="totoptop">
				<div v-for="item in totoplist" :key="item.id">
					<span  @click="settotoplist(item)">{{item.title}}</span>
				</div>
			</div>
			<div class="totopbon">
				<div v-for="item in tobonlist" :key="item.id">
					<span @click="settobonlist(item)">{{item.title}}</span>
				</div>
			</div>
		</div>
		<div class="select3">
			<div>
				<p>面积</p>
				<input type="text" placeholder="请输入">
			</div>
			<div>
				<p>售价</p>
				<input type="text" placeholder="请输入">
			</div>
			<div>
				<p>联系人</p>
				<input type="text" placeholder="请输入">
			</div>
		</div>
		<div class="time">
			<p>有效时间</p>
			<div :class="flag?'active':''" @click="day">
				30天
			</div>
		</div>
		<div class="submit">
			<div class="checkbox">
				<checkbox checked="true"/><span>已阅读并接受</span><span class="sum">《宏烨找房网房源信息发布规则》</span>
			</div>
			<div class="finish">
				<div @click="pay">发布并支付</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {pay} from '@/service'
	export default {
		data() {
			return {
				go:'<',
				title: '二手房',
				array:['高层住宅','小高层住宅','商铺/门面房','厂房','写字楼','请选择'],
				array2:['请选择','主城区','宿豫区','宿城新区','苏宿园区','开发区','湖滨新区'],
				index:5,
				index2:0,
				multiArray: [['请选择','1室', '2室','3室'], ['请选择','1厅', '2厅', '3厅'], ['请选择','1卫', '2卫','3卫']],
				multiIndex: [0, 0, 0],
				totoplist:[],
				tobonlist:[
					{
						id:1,
						title:'新上房源'
					},
					{
						id:2,
						title:'小户型'
					},
					{
						id:3,
						title:'有电梯'
					},
					{
						id:4,
						title:'优质教育'
					},
					{
						id:5,
						title:'低总价'
					},
					{
						id:6,
						title:'满两年'
					},
					{
						id:7,
						title:'满五年'
					},
					{
						id:8,
						title:'随时看房'
					},
					{
						id:9,
						title:'满五唯一'
					},
					{
						id:10,
						title:'低首付'
					},
					{
						id:11,
						title:'两室朝阳'
					},
					{
						id:12,
						title:'精装'
					},
					{
						id:13,
						title:'南北通透'
					},
					{
						id:14,
						title:'品质小区'
					},
				],
				flag:false
			}
		},
		onLoad() {

		},
		methods: {
			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			bindPickerChange2: function(e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index2 = e.detail.value
			},
			bindMultiPickerChange: function (e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				this.multiIndex = e.detail.value
			},
			settobonlist(item){
				console.log(item.id);
				if(this.totoplist.length<4){
					let a = this.tobonlist.filter(ite=>ite.id!==(item.id))
					let b = this.tobonlist.filter(ite=>ite.id==(item.id))[0]
					// console.log(a);
					// console.log(b);
					let c = this.totoplist
					c.push(b)
					// console.log(c);
					this.totoplist = c;
					this.tobonlist = a;
				}else{
					wx.showToast({
						title: '最多选择四个哦！',
						icon: 'loading',
						duration: 1000,
						mask:true
					})
 
				}
				
			},
			settotoplist(item){
				console.log(item.id);
				let a = this.totoplist.filter(ite=>ite.id!==(item.id))
				let b = this.totoplist.filter(ite=>ite.id==(item.id))[0]
				// console.log(a);
				// console.log(b);
				let c = this.tobonlist
				c.push(b)
				// console.log(c);
				this.totoplist = a;
				this.tobonlist = c;
			},
			day(){
				this.flag = !this.flag
			},
			goto(){
				// wx.switchTab({
				// 	url:'/pages/publish/index'
				// })
				wx.navigateBack({
					delta: 1
				});
			},
			uploader(){
				console.log(123);
				wx.navigateTo({
					url:'/pages/uploader/index'
				})
			},
			async pay(){
				let result = await pay({total_fee:100})
				// console.log(result);
				let {timeStamp,nonceStr,paySign} = result.data
				wx.requestPayment({
					timeStamp,
					nonceStr,
					package:result.data.package,
					signType :'MD5',
					paySign
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		.top{
			width: 100%;
			height: 180rpx;
			background: rgba(2, 114, 240, 1);
			color: #fff;
			text-align: center;
			line-height: 150rpx;
			>span{
				float: left;
				margin-left: 30rpx;
			}
		}
		.null{
			width: 100%;
			height: 20rpx;
			background: rgb(241, 241, 241);
		}
		.massage{
			width: 100%;
			height: 100rpx;
			background: rgb(250, 220, 220);
			display: flex;
			// justify-content: center;
			align-items: center;
			color: red;
			>span{
				margin-left: 20rpx;
			}
		}
		.upimg{
			width: 100%;
			height: 150rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			.left{
				width: 120rpx;
				height: 120rpx;
				background: rgb(216, 213, 213);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 60rpx;
				color: rgb(143, 143, 143);
			}
			.right{
				flex: 1;
				margin: 0 20rpx;
				.right1{
					font-size: 35rpx;
					font-weight: bold;
					color: rgb(129, 127, 127);
				}
				.right2{
					font-size: 25rpx;
					color: rgb(129, 127, 127);
				}
			}
		}
		.select3{
			width: 100%;
			>div{
				color: rgb(167, 167, 167);
				height: 150rpx;
				margin: 20rpx;
				border-bottom: 1px solid rgb(207, 207, 207);
				.section{
					font-size: 20px;
					margin-top: 30rpx;
				}
				input{
					margin-top: 30rpx;
				}
			}
			>div:nth-child(3){
				border: none;
			}
		}
		.inputtwo{
			display: flex;
			height: 50rpx;
			margin: 20rpx;
			color: rgb(167, 167, 167);
			>input{
				width: 100rpx;
				margin-left: 20rpx;
			}
			.spans{
				margin-left: 20rpx;
			}
		}
		.totop{
			margin: 20rpx;
			color: rgb(160, 159, 159);
			.totoptop{
				width: 100%;
				height: 100rpx;
				border-bottom: 1px solid rgb(207, 207, 207);
				display: flex;
				flex-wrap: wrap;
				>div{
					margin: 10rpx;
					>span{
						width: 100%;
						padding: 5rpx;
						text-align: center;
						// background: red;
						display: block;
						border: 1rpx solid rgb(153, 151, 151);
						border-radius: 10rpx;
					}
				}
			}
			.totopbon{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				color: rgb(160, 159, 159);
				>div{
					margin: 10rpx;
					>span{
						width: 100%;
						padding: 5rpx;
						text-align: center;
						// background: red;
						display: block;
						border: 1rpx solid rgb(153, 151, 151);
						border-radius: 10rpx;
					}
				}
			}
		}
		.time{
			margin: 20rpx;
			>div{
				width: 200rpx;
				height: 100rpx;
				border: 1rpx solid rgb(161, 161, 161);
				margin: 30rpx;
				text-align: center;
				line-height: 100rpx;
				border-radius: 10rpx;
				color: rgb(138, 138, 138);
			}
			.active{
				border: 1rpx solid rgb(221, 76, 76);
				background: rgb(231, 161, 161);
				color: #fff;
			}
		}
		.submit{
			width: 100%;
			height: 220rpx;
			background: rgb(236, 236, 236);
			.checkbox{
				line-height: 100rpx;
				margin-left: 30rpx;
				.sum{
					font-size: 12px;
				}
			}
			.finish{
				display: flex;
				justify-content: center;
				>div{
					width: 80%;
					height: 100rpx;
					background: rgb(231, 113, 113);
					border-radius: 50rpx;
					text-align: center;
					line-height: 100rpx;
					color: #fff;
				}
			}
		}
	}
</style>
